<template>
  <div class="header-menu">
    <el-menu
    class="el-menu-demo"
    mode="horizontal"
    background-color="#242424"
    text-color="#fff"
    active-text-color="#C20C0C"
    default-active="1"
  >
    <el-menu class="wangyi-title"><img src="../../assets/images/indexImages/wangyiyun.png"/>网易云音乐</el-menu>
    <el-menu-item index="1" @click="handleFindSong">发现音乐</el-menu-item>
    <el-menu-item index="2" @click="handleMySong">我的音乐</el-menu-item>
    <el-menu-item index="3" @click="handleFriends">朋友</el-menu-item>
    <el-menu-item @click="handleGoShop">商城</el-menu-item>
    <el-menu-item @click="handleMusician">音乐人</el-menu-item>
    <el-menu-item index="6" @click="handleDownload">下载客户端</el-menu-item>
    <el-menu class="user-login">
      <input placeholder="音乐/视频/电台/用户" class="input-login" icon="el-icon-search"></input>
        <button>创作者中心</button>
        <i class="login" @click="handleLogin" v-if="!avatarurl">登录</i>
        <div class="login-avatar" v-if="avatarurl">
          <img :src="avatarurl" class="avatar">
          <span @click="HandleOutLogin">登出: {{nickname}}</span>
        </div>
    </el-menu>
  </el-menu>
  <NavBar v-if="isShowNavBar"/>
  <!-- 弹框 -->
  <PopUp v-show="switchPopUp"/>
  </div>

</template>

<script>
import { mapMutations, mapState } from 'vuex'
import NavBar from '../NavBar'
import PopUp from '../PopUp'
export default {
  name: 'Header',
  components: {
    NavBar,
    PopUp
  },
  data() {
    return {
      isShowNavBar: true
    }
  },
  computed: {
    ...mapState({
      switchPopUp: (state) => state.header.switchPopUp,
      nickname: (state) => state.user.nickname,
      avatarurl: (state) => state.user.avatarurl
    })
  },
  methods: {
    ...mapMutations('header', ['SWITCH_POPUP']),
    ...mapMutations('songandfriends', ['SWIATCH_SONG_FRIEND']),
    ...mapMutations('user', ['OUT_LOGIN']),
    handleMySong() {
      this.$router.push('/mysong')
    },
    handleFriends() {
      this.$router.push('/friends')
    },
    handleDownload() {
      this.$router.push('/download')
    },
    handleFindSong() {
      this.$router.push('/')
    },
    // 弹窗
    handleLogin() {
      console.log('打开弹窗')
      this.SWITCH_POPUP(true)
      document.documentElement.style.overflow = 'hidden'
    },
    handleGoShop() {
      window.open('https://music.163.com/store/product', '_self')
    },
    handleMusician() {
      window.open('https://music.163.com/st/musician', '_self')
    },
    //退出登录
    HandleOutLogin() {
      this.SWIATCH_SONG_FRIEND(true)
      this.OUT_LOGIN()
    }
  },
  watch: {
    $route(to, from) {
      // console.log(to,from);
      const res = to.path.indexOf('homesong')
      if (res === 1) {
        this.isShowNavBar = true
      } else {
        this.isShowNavBar = false
      }
    }
  },
  mounted() {
    if (this.nickname) {
      this.SWIATCH_SONG_FRIEND(false)
    }
  }
}
</script>

<style scoped>
.el-menu-demo {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wangyi-title {
  font-size: 20px;
  background-color: #242424;
  color: #fff;
  border-right: #242424;
  cursor: pointer;
}
.wangyi-title img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.user-login {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #242424;
  margin-left: 10px;
  border-right: none;
}
.input-login {
  height: 30px;
  border-radius: 15px;
  border: none;
  outline: none;
  padding-left: 20px;
}
.user-login button {
  margin-left: 10px;
  padding: 5px;
  border: 1px solid #fff;
  color: #fff;
  background-color: #242424;
  border-radius: 5px;
}
.login {
  margin-left: 15px;
  color: #fff;
  cursor: default;
}
.login:hover {
  text-decoration: underline;
}
/* 弹框 */
.login-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  padding: 0 20px;
}
.login-avatar {
  color: #fff;
  cursor: default;
}
</style>
